<template>
  <div>
    <v-header></v-header>
    <div class="line"></div>
    <!--导航栏-->
    <v-menu></v-menu>
    <!--主体-->
    <div class="musicBody">
      <el-container style="margin-top: 40px" class="layout-container-demo">
        <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
          <el-scrollbar>
            <el-menu :default-active="activeIndex" @select="handleSelect">
              <el-menu-item index="1">推荐</el-menu-item>
              <el-menu-item index="2">最近更新</el-menu-item>
              <el-menu-item index="3">播放最多</el-menu-item>
            </el-menu>
          </el-scrollbar>
        </el-aside>
        <el-main>
          <!--歌单全部内容-->
          <div style="width: 100%;" v-for="(item,index) in musicSheetList" :key="index">
            <!--一行内容-->
            <div>
              <!--图片显示-->
              <div style="display: inline-block;">
                <el-image
                  style="width: 100px; height: 100px"
                  :src="item.imgUrl"
                  fit="fill"></el-image>
              </div>
              <!--信息显示区域-->
              <div style="margin-left: 10px;display: inline-block;vertical-align: top;">
                <div :title="item.specialName" style="display: inline-block;float: left;width: 500px"
                     v-text="item.specialName">1234356
                </div>
                <div :title="item.userName" style="width: 135px;
                line-height: 15px;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  white-space: nowrap;" v-text="'作者:'+item.userName"></div>
                <div :title="item.intro" style="margin-top: 10px;
                  font-size: 10px;
                  color: #999999;
                  width: 650px;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  white-space: nowrap;" v-text="item.intro"></div>
                <div style="margin-top: 20px">
                  <el-button type="primary" icon="iconfont icon-sousuo" size="mini" @click="toMusicSheetDetail(item)">
                    &nbsp查看歌单
                  </el-button>
                  <el-button type="primary" size="mini" v-if="item.likeFlag === 0" @click="likeSheet(index,item.specialId)">
                    <i class="iconfont icon-xin"></i>
                    &nbsp收藏歌单
                  </el-button>
                  <el-button type="primary" size="mini" v-else @click="likeSheet(index,item.specialId)">
                    <i class="iconfont icon-xin2" style="color: red"></i>
                    &nbsp收藏歌单
                  </el-button>
                </div>
              </div>
              <el-divider border-style="margin:12px"></el-divider>
            </div>
          </div>
        </el-main>
      </el-container>
    </div>
  </div>
</template>

<script>
  import header from "../layout/Header";
  import footer from "../layout/Footer";
  import menu from "../layout/Menu";

  export default {
    components: {
      'v-header': header,
      'v-footer': footer,
      'v-menu': menu
    },
    name: "MusicSheetV2",
    data() {
      return {
        activeIndex: '1',
        musicSheetList: [],
      }
    },
    created() {
      document.title = '歌单'
    },
    mounted() {
      this.getMusicSheet('1');
    },
    methods: {
      //喜欢歌单
      likeSheet(index,specialId) {
        if (sessionStorage.getItem("token") != null) {
          this.$axios({
            method: 'post',
            url: '/user/likeSheet',
            data: {
              specialId: specialId
            },
            headers: {
              authentication: sessionStorage.getItem("token")
            }
          }).then(res => {
            if (res.data.msgCode === '-1') {
              this.$message({
                message: '登录过期，请重新登录',
                type: 'warning'
              });
              this.$router.push('/login');
            } else {
              if (this.musicSheetList[index].likeFlag === 1){
                this.musicSheetList[index].likeFlag = 0;
              }else {
                this.musicSheetList[index].likeFlag = 1;
              }
            }
          })
        }else {
          this.$confirm('您还未登录，请先登录后添加喜欢', '提示', {
            confirmButtonText: '确定',
            type: 'info'
          }).then(() => {
            this.$router.push('/login')
          })
        }
      },
      toMusicSheetDetail(item) {
        console.log(item);
        this.$router.push({
          path: '/musicSheetDetail',
          query: {
            id: item.id
          }
        })
      },
      handleSelect(item) {
        this.getMusicSheet(item);
      },
      getMusicSheet(item) {
        this.$axios({
          method: 'get',
          url: '/kugou/musicSheet/' + item,
          headers: {
            token: sessionStorage.getItem("token")
          },
          dataType: 'json',
        }).then(res => {
          console.log(res.data.data.info);
          this.musicSheetList = res.data.data.info;
        })
      },
    }
  }
</script>

<style scoped>
  .musicBody {
    width: 1000px;
    margin: 0 auto;
  }
</style>
